<script setup lang="ts">
import { ref, getCurrentInstance } from 'vue'
import { useRoute } from 'vue-router'
import { message } from 'ant-design-vue'
import * as accountApi from '@/api/account'
import { useUserStore } from '@/store/modules/user'
import Swiper from './components/swiper.vue'
import SettingCard from './components/setting.vue'
import FastCard from './components/fast.vue'
import Plugn from './components/plugn.vue'
import Live2d from '@/components/Live2d/index.vue'
import Tip from '../../components/Tip/index.vue'
import SystemTip from '@/components/Tip/SystemTip.vue'
import { useBrandStore } from '@/store/modules/brand'

const brandStore = useBrandStore()

const TipRef = ref()
const systemTipRef = ref()

const userStore = useUserStore()

const route = useRoute()
const activeKey = ref<string>('1')

let workPlace_xinRenVideo_Flag = sessionStorage.getItem('workPlace_xinRenVideo_Flag')

onMounted(() => {
  if (brandStore.workPlace_tipSet) {
    tipSet()
  }

  if (brandStore.workPlace_xinRenVideo && !workPlace_xinRenVideo_Flag) {
    TipRef.value.showModal(true)
    sessionStorage.setItem('workPlace_xinRenVideo_Flag', true)
  }

  getStatusNum()
  getXyStatusNum()
})

const tipSet = () => {
  let systemTipFlag = sessionStorage.getItem('systemTipFlag')
  // console.log('systemTipFlag=', systemTipFlag)
  if (!systemTipFlag) {
    systemTipRef.value.showModal(true)
    // TipRef.value.showModal(true)

    sessionStorage.setItem('systemTipFlag', true)
    setTimeout(() => {
      sessionStorage.setItem('systemTipFlag', false)
    }, 1000 * 60 * 60 * 2)
  }
}
// 状态数量统计
interface NumInfo {
  renewNum: number | string
  robotOnLineNum: number | string
  robotOffLineNum: number | string
  totality: number | string
  updateNum: number | string
  wechatRobotOffLineNum: number | string
  wechatRobotOnLineNum: number | string
}
const numInfo = ref<NumInfo>()
const getStatusNum = async () => {
  try {
    let { state, data, message: msg } = await accountApi.statisticalMagnitude()
    if (state === 200) {
      numInfo.value = data
    } else {
      message.error(msg)
    }
  } catch (error) {
    message.error('网络请求连接失败~')
  }
}

// 状态数量统计 - 闲鱼
interface XyNumInfo {
  fishRobotOffLineNum: number | string
  fishRobotOnLineNum: number | string
  renewNum: number | string
  robotOffLineNum: number | string
  robotOnLineNum: number | string
  totality: number | string
  updateNum: number | string
}
const xyNumInfo = ref<XyNumInfo>()
const getXyStatusNum = async () => {
  try {
    let { state, data, message: msg } = await accountApi.fishStatisticalMagnitude()
    if (state === 200) {
      xyNumInfo.value = data
    } else {
      message.error(msg)
    }
  } catch (error) {
    message.error('网络请求连接失败~')
  }
}
let dxTokenRef = ref()
const add = () => {
  dxTokenRef.value.callbackFn()
}

const getToken = (e: any) => {
  console.log(e)
}
</script>

<template>
  <page-container :title="route.meta.title">
    <Tip ref="TipRef"></Tip>
    <SystemTip ref="systemTipRef"></SystemTip>

    <Live2d></Live2d>
    <div class="headerContent">
      <div class="left">
        <img src="../../assets/waiter-1.png" style="width: 60px; height: 60px" alt="" />

        <div class="userName">
          <div class="title">Hi, {{ userStore.userInfo.userName }}</div>
          <div class="desc">多平台多行业自动化运营解决方案，让赚钱更简单！</div>
        </div>
      </div>

      <div class="extra-right">
        <div class="item wx">
          <div
            class="title"
            style="
              font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
                Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
              color: rgba(0, 0, 0, 0.45);
              font-size: 14px;
            "
          >
            微信(总数/在线/离线)
          </div>
          <div class="value">
            <div class="st">{{ numInfo?.totality?.toString() || '-' }} /</div>
            <div class="st">{{ numInfo?.wechatRobotOnLineNum?.toString() || '-' }} /</div>
            <div class="st">{{ numInfo?.wechatRobotOffLineNum?.toString() || '-' }}</div>
          </div>
        </div>
        <div class="item xy">
          <div
            class="title"
            style="
              font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
                Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
              color: rgba(0, 0, 0, 0.45);
              font-size: 14px;
            "
          >
            闲鱼(总数/在线/离线)
          </div>
          <div class="value">
            <div class="st">{{ xyNumInfo?.totality?.toString() || '-' }} /</div>
            <div class="st">{{ xyNumInfo?.fishRobotOnLineNum?.toString() || '-' }} /</div>
            <div class="st">{{ xyNumInfo?.fishRobotOffLineNum?.toString() || '-' }}</div>
          </div>
        </div>
      </div>
    </div>
    <!-- class="rule-container" -->
    <div style="margin-top: 10px">
      <a-row :gutter="24">
        <a-col :xl="16" :lg="24" :md="24" :sm="24" :xs="24">
          <Swiper></Swiper>
          <div style="height: 10px"></div>
          <Plugn></Plugn>
        </a-col>
        <a-col style="padding: 0 12px" :xl="8" :lg="24" :md="24" :sm="24" :xs="24">
          <SettingCard></SettingCard>
          <div style="height: 10px"></div>

          <FastCard v-if="brandStore.workPlace_fastFlag"></FastCard>
        </a-col>
      </a-row>
    </div>
  </page-container>
</template>

<style lang="less" scoped>
.headerContent {
  display: flex;
  padding: 30px;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  border-radius: 8px;

  .left {
    display: flex;
    align-items: center;

    .userName {
      margin-left: 30px;

      .title {
        color: #000;
        font-weight: 700;
        font-size: 18px;
      }

      .desc {
        margin-top: 15px;
        // color: #858a99;
        font-size: 14px;
      }
    }
  }

  .extra-right {
    display: flex;
    justify-content: space-between;

    .item {
      // display: flex;
      // flex-direction: column;
      .title {
        // color: #858a99;
        font-size: 16px;
      }

      .value {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        // margin-top: 15px;
        font-size: 18px;
        color: #000;

        .st {
          margin: 0 8px;
        }
      }
    }

    .wx {
    }

    .xy {
      margin-left: 30px;
    }
  }
}

.rule-container {
  display: flex;
  width: 100%;
  height: 1000px;

  .left-box {
    flex: 4;

    // background-color: pink;
    .banner {
      width: 100%;

      .ant-carousel :deep(.slick-slide) {
        text-align: center;
        height: 160px;
        line-height: 160px;
        background: #364d79;
        overflow: hidden;
      }

      .ant-carousel :deep(.slick-slide h3) {
        color: #fff;
      }
    }
  }

  .right-box {
    flex: 1;
    background-color: purple;
  }
}
</style>
